<template>
  <li 
    :class="{ completed: todo.done, editing: editing }" 
    class="todo">
    <div class="view">
      <input
        :checked="todo.done"
        class="toggle"
        type="checkbox"
        @change="toggleTodo( todo)">
      <label 
        @dblclick="editing = true" 
        v-text="todo.text"/>
      <button 
        class="destroy" 
        @click="deleteTodo( todo )"/>
    </div>
    <input
      v-focus="editing"
      v-show="editing"
      :value="todo.text"
      class="edit"
      @keyup.enter="doneEdit"
      @keyup.esc="cancelEdit"
      @blur="doneEdit">
  </li>
</template>

<script>
export default {
    name: 'Todo',
    directives: {
        focus(el, { value }, { context }) {
            if (value) {
                context.$nextTick(() => {
                    el.focus();
                });
            }
        }
    },
    props: {
        todo: {
            type: Object,
            default: function () {
                return {};
            }
        }
    },
    data() {
        return {
            editing: false
        };
    },
    methods: {
        deleteTodo(todo) {
            this.$emit('deleteTodo', todo);
        },
        editTodo({ todo, value }) {
            this.$emit('editTodo', { todo, value });
        },
        toggleTodo(todo) {
            this.$emit('toggleTodo', todo);
        },
        doneEdit(e) {
            const value = e.target.value.trim();
            const { todo } = this;
            if (!value) {
                this.deleteTodo({
                    todo
                });
            } else if (this.editing) {
                this.editTodo({
                    todo,
                    value
                });
                this.editing = false;
            }
        },
        cancelEdit(e) {
            e.target.value = this.todo.text;
            this.editing = false;
        }
    }
};
</script>
